import Vue from 'vue'
import App from './App.vue'

import my from './Views/My.vue'
import parte from './Views/Parte.vue'
import find from './Views/Find.vue'
import NoteFound from './Views/NoteFound.vue'
import Ranking from './Views/second/Ranking.vue'
import Recommend from './Views/second/Recommend.vue'
import SongList from './Views/second/SongList.vue'
Vue.config.productionTip = false
// 1.引入VueRouter
import VueRouter from 'vue-router'
// 2.使用Vue.use将构造函数VueRouter加载到Vue上
// Vue.use就是在装插件
Vue.use(VueRouter)
// 3.配置路由规则
// 建议定义路由时定义name
let routes = [
  { name: 'Find', path: '/', redirect: '/find' },
  // 可以每一条路由规则定义name，将来可以用于编程式导航跳转
  {
    name: 'Find', path: '/find', component: find,
    children: [
      // 一个对象表示一个子路由规则
      // 希望用户访问/find/ranking
      // 子路由中不要加/开头匹配的是一级路由
      {path:'ranking',component:Ranking},
      {path:'recommend',component:Recommend},
      {path:'songList',component:SongList}
    ]
  },
  // 用来匹配无传参
  { name: 'my', path: '/my', component: my },
  { name: 'parte', path: '/parte', component: parte },
  // 定义接收参数，动态路径传参
  // 加了冒号name就是参数
  // name最终会被放到$route.params中作为属性传递给目标组件
  { path: '/parte/:name/:age', component: parte },
  // 在配置规则的最底部写通配符*匹配所有路径
  { path: '*', component: NoteFound }
];
// 4.根据规则配置对象
let router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})
// 5.将路由对象注入到new Vue创建的实例中
new Vue({
  render: h => h(App),
  router
}).$mount('#app')